
<template>
    <div>
          <!-- 面包屑导航区域 -->
        <v-breadcrumb separator="/">
        <v-breadcrumb-item :to="{ path: '/helloworld' }">首页</v-breadcrumb-item>
        <v-breadcrumb-item>小程序管理</v-breadcrumb-item>
        <v-breadcrumb-item>管理聊天室</v-breadcrumb-item>
        </v-breadcrumb>
        <!-- <卡片区域> -->
        <v-card>
            <!--搜索与添加区-->
            <v-row :gutter="20">
            <v-col :span="1">
              <v-button type="ghost" icon="search" shape="circle" @click="getRoomList"></v-button>
              </v-col>
            <v-col :span="8">
              <v-input icon="search" placeholder="请输入内容"  v-model="query" clearable @clear="getRoomList">
              </v-input>
            </v-col>
            <!-- <v-col :span="4">
              <v-button type="primary" @click="addDialogVisible=true">添加聊天室</v-button>
            </v-col> -->
          </v-row>
        </v-card>
 <!--聊天室列表区-->

  <el-table :data="roomlist"  height="450" style="width: 100%" border stripe >
      <el-table-column type="index" > </el-table-column>
      <el-table-column label="聊天室ID" prop="id"> 
          <template slot-scope="scope">
         <span style="margin-left: 10px"  @click="goTocontent(scope.row)" >{{ scope.row.id }} </span>
          </template>
      </el-table-column>
      <el-table-column label="聊天室名" prop="name"> 
          <template slot-scope="scope">
         <span style="margin-left: 10px"  @click="goTocontent(scope.row)" >{{ scope.row.name }} </span>
          </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="creationTime" > 
        <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px"  @click="goTocontent(scope.row)" >{{ scope.row.createTime }} </span>
      </template>
      </el-table-column>
      <el-table-column label="操作"  width="380px"> 
      <template  slot-scope="scope">
              <!-- <聊天室编辑修改区> -->
               <el-tooltip  effect="dark" content="修改" placement="top" :enterable="false">
               <el-button type="primary" icon="el-icon-edit" size="mini"  @click="showEditDialog(scope.row)"></el-button>
               </el-tooltip>
              <!--删除-->
               <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete"  size="mini" @click="removeRoomById(scope.row.id)"></el-button>
               </el-tooltip>
              <!--查看-->
               <el-tooltip class="item" effect="dark" content="查看详情" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting"  size="mini" ></el-button>
               </el-tooltip>
      </template>
      </el-table-column>
  </el-table>
 
    <!-- <添加聊天室的对话框>
<v-modal title="添加聊天室" :visible.sync="addDialogVisible"  @close="addDialogClosed">
  <v-form :model="addForm"  ref="addFormRef" direction="horizontal">
  <v-form-item label="聊天室名" prop="RoomName" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="addForm.name"></v-input>
  </v-form-item>
 <v-form-item label="所有者" prop="authorName" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="addForm.roomCreatorId" ></v-input>
  </v-form-item>
  <v-form-item label="聊天室类型" prop="NewsType" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="addForm.RoomType" disabled></v-input>
  </v-form-item>
  <v-form-item label="上传封面" prop="NewsType" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="addForm.imgURL" ></v-input>
   </v-form-item>

  </v-form>

  <span slot="footer" class="dialog-footer">
    <v-button @click="addDialogVisible= false">取 消</v-button>
    <v-button type="primary"  @click="addRoom"> 确 定</v-button>
  </span>
</v-modal> -->

<!-- <修改聊天室的对话框> -->
<v-modal title="修改聊天室" :visible.sync="editDialogVisible"  @close="editDialogClosed">
  <v-form ref="editFormRef" :model="editForm"   direction="horizontal">
  <v-form-item label="聊天室名" prop="name" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="editForm.name" ></v-input>
  </v-form-item>
<!-- 
<v-form-item label="聊天室类型" prop="newsType" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="editForm.RoomType"  disabled></v-input>
  </v-form-item> -->
  <v-form-item label="所有者" prop="roomCreatorId" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="editForm.roomCreatorId" ></v-input>
  </v-form-item>
  <v-form-item label="聊天室封面" prop="imgURL" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="editForm.imgURL" ></v-input>
  </v-form-item>
  

  </v-form>

  <span slot="footer" class="dialog-footer">
    <v-button @click="editDialogVisible= false">取 消</v-button>
    <v-button type="primary" @click="editRoomInfo">确 定</v-button>
  </span>
</v-modal>
    

    </div>
</template>

<script>
import {getChatRoomList,removeRoom} from '../../util/api.js'

export default {
 
    data()
    {
        return{
          
            query:'',
            name:'',
            id:'',
            creationTime:'',
            roomCreatorId:'',
            RoomType:'',
            imgURL:'',
            roomlist:[],
            labelCol: {span: 6},
            wrapperCol: {span: 14},
            //删除指定聊天室等操作
            token:'',
            roomId:'',
       
            //添加聊天室的对话框
          addDialogVisible:false,
          total:0,
          pagenum:0,
          pagesize:0,
           //添加聊天室的数据表单
          addForm:{
            name:'',
            id:'',
            creationTime:'',
            roomCreatorId:'',
            RoomType:'',
            imgURL:'',                          
           },
           //修改聊天室信息
          editDialogVisible:false,
           editForm:{
            name:'',
            id:'',
            creationTime:'',
            roomCreatorId:'',
            RoomType:'',
            imgURL:'',
           },
      
         
        }        
    },
    created(){
    this.token= window.sessionStorage.getItem('token')
    this.getRoomList()
      // console.log(this.token)
    },
    methods:{
      async getRoomList(){
          const result =await this.$http.post(getChatRoomList,
          {
            'token':this.token
          }
          );
            console.log(result)
            if(result.status!==200) return this.$message.console.error("获取数据失败！");
            this.roomlist=result.data.bool
             this.total=result.data.bool.length
            this.$message.success("获取数据成功")        
      },
      goTocontent(e)
      {
        console.log(e)
        var info=e;
        this.$router.push({path:'/content',
        query:{
          info:info
          }
        })
      },
          //监听pagesize
    handleSizeChange(newSize){
            this.pagesize=newSize
            this.getRoomList()
            console.log(newSize)
        },
        //监听页码值改变
    handleCurrentChange(newPage){
            this.pagenum=newPage
            this.getRoomList()
            console.log(newPage)
        },
       
    // //添加聊天室
    // addRoom(){
    //         this.$refs.addFormRef.validate(async valid=>{
    //             //  console.log(valid)
    //             if(!valid) return
    //             //通过可以发送添加的请求
    //             this.$message.success("添加成功");

    //             this.addDialogVisible=false;
    //             //重新获取列表
    //             this.getRoomList()
    //          })
    //     },
    
    addDialogClosed(){
            this.$refs.addFormRef.resetFields();
        },

    showEditDialog(id){
            console.log(id)
            this.editDialogVisible=true
            this.editForm.name=id.name
            this.editForm.RoomType=id.RoomType;
            this.editForm.Owner=id.Owner
            this.editForm.RoomID=id.RoomID
            this.editForm.CoverImageFiled=id.CoverImageFile

        },
        //监听修改用户对话框的关闭事件
  editDialogClosed(){
            this.$refs.editFormRef.resetFields()

        },
       
  editRoomInfo(){
            this.$refs.editFormRef.validate(async valid=>{
                // console.log(valid)
                if(!valid) return
                //发起修改用户信息的请求
                //关闭对话框
                this.editDialogVisible=false
                //刷新列表
                this.getRoomList()
                //提示更新成功
                this.$message.success('更新新闻成功')
            })
        },
  async removeRoomById(id){
         //id就是房间的id
          console.log(id)
            //先弹框询问
          const confirmResult=await this.$confirm('此操作将永久删除该聊天室, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=> err)
        if(confirmResult!='confirm')
        {
            return this.$message.info('已经取消删除')
        }
      //删除房间
      const result =await this.$http.post(removeRoom,
          {
            'token':this.token,
            'roomId':id
          }
      )
      console.log(result)
        this.editDialogVisible=false
                //刷新列表
        this.getRoomList()
                //提示更新成功
        this.$message.success('删除聊天室成功')

    }
       

    }
}

</script>
<style lang="less" scoped>


</style>